<template>
  <div id="app">
    <keep-alive>
      <router-view class="view" v-if="$route.meta.keepAlive" ref="aa"></router-view>
    </keep-alive>
    <router-view class="view" v-if="!$route.meta.keepAlive"></router-view>
    <div
      class="tabbar"
      v-if="$route.meta.isTabbar"
      :style="{ transform: `rotate(${tabbar[$route.name].rotate}deg)` }"
      ref="tabbar"
    >
      <ul ref="ul">
        <li
          v-for="(item, key, index) in tabbar"
          :key="key"
          :class="{ active: $route.name === key, 'hide-li': disabled }"
          :style="{ transform: `rotate(${-tabbar[$route.name].rotate}deg)`, ...otherStyles[index] }"
          @click="tabChange(key, index)"
        >
          <i class="iconfont" v-html="item.icon"></i>
          <span>{{ item.title }}</span>
        </li>
        <div class="add iconfont" @click="showHide" @touchmove="changePostion($event)">
          &#xe60b;
        </div>
      </ul>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import router from "@/router";
@Component
export default class App extends Vue {
  $route!: any;
  defaultStyle: any = {
    opacity: "0",
    visibility: "hidden"
  };
  $refs!: HTMLFormElement;
  otherStyles: any = {};
  disabled: boolean = false;
  tabbar: object = {
    index: {
      title: "index",
      icon: "&#xe694;",
      rotate: 90
    },
    like: {
      title: "like",
      icon: "&#xe740;",
      rotate: 0
    },
    music: {
      title: "music",
      icon: "&#xe6af;",
      rotate: -90
    },
    mine: {
      title: "mine",
      icon: "&#xe609;",
      rotate: -180
    }
  };
  tabChange(key: string, index: number): void {
    if (!this.disabled) {
      if (this.$route.name !== key) {
        this.$router.replace({ name: key });
      }
    }
  }
  showHide() {
    if (!this.disabled) {
      this.disabled = true;
      this.otherStyles = [
        {
          left: "1.25rem"
        },
        {
          top: "1.25rem"
        },
        {
          right: "1.25rem"
        },
        {
          bottom: "1.25rem"
        }
      ];
    } else {
      this.disabled = false;
      this.otherStyles = [
        {
          left: "0"
        },
        {
          top: "0"
        },
        {
          right: "0"
        },
        {
          bottom: "0"
        }
      ];
    }
  }
  changePostion(e: any) {
    const touch = e.touches[0];
    const { pageX, pageY } = touch;
    const { offsetWidth, offsetHeight } = this.$refs.tabbar;
    const tabbarStyle = this.$refs.tabbar.style;
    const { clientWidth, clientHeight } = document.body;

    let left = Math.max(pageX - offsetWidth / 2, 0);
    left = Math.min(pageX - offsetWidth / 2, clientWidth - offsetWidth);
    if (left < 0) {
      left = 0;
    }
    let top = Math.max(pageY - offsetHeight / 2, 0);
    top = Math.min(pageY - offsetHeight / 2, clientHeight - offsetHeight);
    if (top < 0) {
      top = 0;
    }
    tabbarStyle.left = left + "px";
    tabbarStyle.top = top + "px";

    // this.$refs.tabbar.style.left = offsetLeft
  }
}
</script>
<style lang="scss">
.view {
  height: 100%;
}
.tabbar {
  transition: transform ease-in-out 0.3s;
  position: fixed;
  bottom: 1.5rem;
  width: 3.5rem;
  height: 3.5rem;
  left: calc(50% - 1.75rem);
  bottom: 0.4rem;
  margin: 0 auto;
  z-index: 9999;
  ul {
    width: 3.5rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: space-around;
    position: relative;
    .add {
      font-size: 0.7rem;
      color: #fff;
    }
    .hide-li {
      opacity: 0;
      visibility: hidden;
    }
    li {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 1rem;
      height: 1rem;
      border-radius: 50%;
      background-color: rgba(255, 255, 255, 0.5);
      transition: all ease 0.1s;
      position: absolute;
      @mixin position($left, $right, $top, $bottom, $margin) {
        left: $left;
        top: $top;
        right: $right;
        bottom: $bottom;
        margin: $margin;
      }
      &:nth-child(1) {
        @include position(0, auto, 0, 0, auto);
        transition: all ease 0.3s;
      }
      &:nth-child(2) {
        @include position(0, 0, 0, auto, auto);
        transition: all ease 0.6s;
      }
      &:nth-child(3) {
        @include position(auto, 0, 0, 0, auto);
        transition: all ease 0.9s;
      }
      &:nth-child(4) {
        @include position(0, 0, auto, 0, auto);
        transition: all ease 1.2s;
      }
      i {
        padding-bottom: 0.1rem;
        transition: all ease 0.1s;
      }
      span {
        font-size: 0.22rem;
        transition: all ease 0.1s;
      }
      &.active {
        color: rgb(13, 209, 209);
        font-size: 0.44rem;
        &::after {
          content: "";
          width: 100%;
          height: 100%;
          position: absolute;
          display: block;
          border: 2px solid #fff;
          animation: 2s icon-border infinite linear;
          border-radius: 50%;
        }
        @keyframes icon-border {
          0%,
          100% {
            transform: scale(1);
          }
          50% {
            transform: scale(1.5);
          }
        }
        span {
          height: 0;
          overflow: hidden;
        }
        i {
          padding-bottom: 0;
        }
      }
    }
  }
}
</style>
